<template>

  <div class="app-container calendar-list-container">
<!--会员服务不同时间卡片显示-->
    <el-tabs v-model="activeName">
      <!--tab1-->
      <el-tab-pane label="会员服务" name="first">
        <el-input
          icon="search"
          style="width: 200px;float: right;margin-bottom: 20px"
          class="filter-item"
          placeholder="请输入关键字"
          v-model="query.keyword"
          :on-icon-click="searchTable"
        >
        </el-input>

        <el-table :data="tableData" v-loading="listLoading" stripe style="width: 100%;">
          <el-table-column prop="number" label="会员号" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="type" label="卡种"></el-table-column>
          <el-table-column prop="phone" label="联系电话"></el-table-column>
          <el-table-column prop="address" label="签到地址"></el-table-column>
          <el-table-column prop="date" label="签到时间"></el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="selfInfo">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pagination.current_page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="query.pagination.per_page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="query.pagination.total"
          >
          </el-pagination>
        </div>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { GetTable } from '@/api/card'

export default {
  data() {
    return {
      activeName: 'first',
      visible: [],
      delVisible: false,
      dialogVisible: false,
      title: null,
      listLoading: false,
      tableData: [],
      query: {
        pagination: {
          total: 0,
          page: 1,
          per_page: 10
        },
        keyword: ''
      }
    }
  },
  created() {
    this.searchTable()
    console.log('table show')
  },
  methods: {
    handleSizeChange(val) {
      this.query.pagination.per_page = val
      this.searchTable()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.query.pagination.current_page = val
      this.searchTable()
      console.log(`当前页: ${val}`)
    },
    selfInfo() {
      this.$router.push({ path: '/tableDetail' })
    },
    searchTable() {
      this.listLoading = true
      GetTable(this.query.pagination.current_page, this.query.pagination.per_page, this.query.keyword).then((res) => {
        console.log(res)
        this.listLoading = false
        this.tableData = res.data
        this.query.pagination = res.meta.pagination
      })
    },
    closeDialog() {
      this.dialogVisible = false
    }
  }
}
</script>


